<template>
	<view>
		<u-navbar title="切换城市" autoBack placeholder>
		</u-navbar>
		<view class="header" :style="{height:customBar}">
			<view class="placeholder"></view>
			<view class="flex">
				<u-search :clearabled="true" @change="onInput" @search="doneInput" placeholder="搜索城市 中文/首字母"
					v-model="searchValue">
				</u-search>
				<!-- 				<input class="input" @confirm="doneInput" type="text" confirm-type="search" :adjust-position="false"
					@input="onInput" placeholder="搜索城市 中文/首字母" v-model="searchValue" />
				<view class="back_div fsmall bold blue" @tap="confirm_city">
					确定
				</view> -->
			</view>
		</view>

		<scroll-view scroll-y="true" :scroll-into-view="scrollIntoId" :style="{height:scrollHeight}"
			@touchmove.stop.prevent>
			<view v-if="disdingwei" id="hot">
				<!-- 定位模块 -->
				<view class="dingwei">
					<view class="grey fsmall">
						当前定位
					</view>
					<view class="blue" @click="back_city({city_name:city})">
						{{ city ? city : '定位失败' }}
					</view>
				</view>
			</view>

			<!-- 城市列表 -->
			<view v-if="searchValue == ''" v-for="(item, index) in list" :id="item.idx" :key="item.idx">
				<view class="letter-header bold">{{ item.idx }}</view>
				<view class="city-div" v-for="(city, i) in item['cities']" :key="i" @tap="back_city(city)">
					<text class="city">{{ city.city_name }}</text>
				</view>
			</view>
			<!-- 搜索结果 -->
			<view class="city-div" v-for="(item, index) in searchList" :key="index" @tap="back_city(item)">
				<text class="city">{{ item.city_name }}</text>
			</view>

			<view class="placeholder footer"></view>
		</scroll-view>

		<!-- 右侧字母 -->
		<view class="letters" id="list" v-if="searchValue == ''" @touchstart="touchStart"
			@touchmove.stop.prevent="touchMove" @touchend="touchEnd">
			<view class="fmin" v-for="item in letter" :key="item.idx">{{ item.idx }}</view>
		</view>

		<!-- 选中之后字母   居中显示-->
		<view class="mask" v-if="touchmove">
			<view class="mask-r bold">{{scrollIntoId}}</view>
		</view>
	</view>
</template>

<script>
	import Citys from '../../common/index.list.js'
	import amapFile from "../../common/amap-wx.130.js"
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				amapPlugin: null, // 插件效果
				key: '4412f1a1546136b8476c2c1011cbbad9', //  高德地图申请的key
				city: '', //当前定位的城市
				customBar: '45px', //高度

				winHeight: 0,
				itemHeight: 0,
				winOffsetY: 0,
				touchmove: false, //选中字母触发

				scrollHeight: 0, // 导航栏剩余的高度
				letter: [], //A-Z

				searchValue: '', //搜索文字
				scrollIntoId: '', //选中字母，到达字母的列

				list: [], //城市列表
				searchList: [], // 搜索结果的列表
				disdingwei: true, //控制显示当前定位的 View

				// cacheLocation: '', //最近访问
				// position: '', //定位获取的位置

			}
		},
		watch: {
			list() {
				setTimeout(() => {
					this.setList()
				}, 100)
			}
		},

		onLoad() {
			this.amapPlugin = new amapFile.AMapWX({
				key: this.key
			})
			// 获取当前城市
			this.getRegeo()

			// 计算出使用的高度
			this.scrollHeight = uni.getSystemInfoSync().windowHeight - parseInt(this.customBar) + 'px'

			// 字母A-Z
			this.letter = Citys.index
			// 城市列表
			this.list = Citys.list
		},
		methods: {
			...mapMutations('userLocation', ['setCityPath']),
			setList() {
				// 实现点击页面里面的某一个版块，（滚动到）跳转到当前同一个页面的指定位置
				uni
					.createSelectorQuery()
					.in(this)
					.select('#list')
					.boundingClientRect(ret => { // ret----获取节点宽高等信息的方法
						// 节点-----离页面顶部的距离
						this.winOffsetY = ret.top
						// 节点的高度
						this.winHeight = ret.height
						// 计算 每个字母占用的高度
						this.itemHeight = this.winHeight / this.list.length
					})
					.exec()
			},
			// 手指触摸动作开始
			touchStart(e) {
				this.touchmove = true
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
				if (this.list[index]) {
					this.scrollIntoId = this.list[index].idx //根据id，使 view 滚动
				}
			},
			// 手指触摸后移动
			touchMove(e) {
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
				// 减少赋值的步骤
				if (this.list[index] && this.list[index].idx === this.scrollIntoId) return

				if (this.list[index]) {
					this.scrollIntoId = this.list[index].idx
				}
			},
			// 手指触摸动作结束触发
			touchEnd() {
				this.touchmove = false
			},

			// 回车触发
			doneInput() {
				console.log('我触发了，隐藏键盘')
				// 隐藏已经显示的软键盘
				uni.hideKeyboard()
			},
			// 搜索匹配
			query(source, text) {
				// source 城市列表
				let res = [] //文字搜索到的列表
				let len = source.length
				// 把字符串转换为小写
				var text = text.toLowerCase()
				for (let i = 0; i < len; i++) {
					//单字母搜索
					if (text.length == 1 && /^[a-zA-Z]$/.test(text)) {
						let arr = []
						// 把字符串转换为大写
						let idx = text.toUpperCase()
						if (idx == source[i].idx) {
							console.log(183, source[i])
							// 拿到字母城市的所有列表
							return source[i].cities
						}
					}
					//文字搜索
					if (source[i].cities) {
						// source[i].cities 城市表的第几个---->所有城市
						let _len = source[i].cities.length
						for (let n = 0; n < _len; n++) {
							let _item = source[i].cities[n]
							// new RegExp('^' + text) ---正则表达式--->以这个字开头的
							if (new RegExp('^' + text).test(_item.city_name)) {
								res.push(_item)
								continue
							}
						}
					}
				}
				return res
			},

			// 输入框文字触发
			onInput(e) {
				const value = e
				if (value !== '' && this.list) {
					// 搜索结果的列表
					const queryData = this.query(this.list, String(value).trim())
					this.searchList = queryData
					this.disdingwei = false
				} else {
					this.searchList = []
					this.disdingwei = true
				}
			},

			// 点击选中城市
			back_city(item) {
				let city = item.city_name
				console.log(218, city)
				// vuex方法
				this.setCityPath(city)
				uni.navigateBack()
			},

			// 获取定位
			getRegeo() {
				let _this = this
				this.amapPlugin.getRegeo({
					success: res => {
						this.city = res[0].regeocodeData.addressComponent.city
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.fsmall {
		font-size: 26rpx;
	}

	.fmiddle {
		font-size: 28rpx;
	}

	.blue {
		color: #007aff;
	}

	.bold {
		font-weight: 600;
	}

	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mask {
		position: fixed;
		z-index: 3;
		top: 40%;
		left: 40%;
	}

	.mask-r {
		height: 120rpx;
		width: 120rpx;
		border-radius: 60rpx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(5px);
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #ffffff;
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}

	.header {
		width: 100%;
		position: relative;
		z-index: 8;
		background-color: #ffffff;
	}

	.back_div {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back_img {
		width: 35rpx;
		height: 35rpx;
	}

	.input {
		font-size: 26rpx;
		width: 600rpx;
		height: 60rpx;
		max-height: 60rpx;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 30rpx;
		color: white;
	}

	.show {
		left: 0;
		width: 100%;
		transition: left 0.3s ease;
	}

	.hide {
		left: 100%;
		width: 100%;
		transition: left 0.3s ease;
	}

	.title {
		font-size: 30rpx;
		color: white;
	}

	.letters {
		position: absolute;
		right: 0;
		width: 80rpx;
		color: #333333;
		top: 25%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 510;
	}

	.letters .fmin {}

	.letter-header {
		font-size: 28rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.city-div {
		width: 660rpx;
		margin: auto;
		padding: 20rpx 0;
		border-bottom-width: 0.5rpx;
		border-bottom-color: #ebedef;
		border-bottom-style: solid;
		display: flex;
		align-items: center;
	}

	.city {
		font-size: 28rpx;
		color: #000000;
		padding-left: 30rpx;
	}

	.dingwei {
		width: 90%;
		margin: auto;
		padding-top: 25rpx;
		box-sizing: border-box;
		margin-bottom: 26rpx;
	}

	.dingwei .grey {
		margin-bottom: 25rpx;
	}

	.dingwei_city {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.dingwei_city_one {
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		font-size: 26rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 20rpx 20rpx 0;
	}

	.dingweis {
		width: 32rpx;
		height: 32rpx;
	}

	.dingwei_city_zuijin {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
</style>
